<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
	</head>
	<body>
		<div class="wrap-container">
				<form class="layui-form" style="width: 90%;padding-top: 20px;">
					<div class="layui-form-item">
						<label class="layui-form-label">产品名称：</label>
						<div class="layui-input-block">
							<input type="text" name="pdName" required lay-verify="required" placeholder="请输入产品名称" autocomplete="off" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item" >
						<label class="layui-form-label">产品图片：</label>
						<div class="layui-input-block">
							<input type="text" name="pdPic" id="pic" required lay-verify="required" placeholder="网络图片地址" autocomplete="off" class="layui-input" >
							<input type="file" class="layui-upload-file" id="upload" name="file" value="上传图片">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">产品分类：</label>
						<div class="layui-input-block">
							<select name="pdClass" lay-verify="required">
								<option th:each="cs : ${classList}" th:value="${cs.clId}" th:text="${cs.clName}">分类名</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">产品类型：</label>
						<div class="layui-input-block">
							<select name="pdType" lay-verify="required" lay-filter="type">
								<option value="0">卡密发货</option>
								<option value="1">固定资源</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item" id="gd" hidden>
						<label class="layui-form-label">固定资源：</label>
						<div class="layui-input-block">
							<input type="text" name="pdGd"  placeholder="请输入固定资源" autocomplete="off" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item" id="gdNum" hidden>
						<label class="layui-form-label">固定库存：</label>
						<div class="layui-input-block">
							<input type="number" name="pdGdNum" value="0"  placeholder="请输入固定资源库存件数" autocomplete="off" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">市场售价：</label>
						<div class="layui-input-block">
							<input type="text" name="pdPrice2" required lay-verify="required" placeholder="请输入市场售价" autocomplete="off" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">产品售价：</label>
						<div class="layui-input-block">
							<input type="text" name="pdPrice" required lay-verify="required" placeholder="请输入产品售价" autocomplete="off" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">产品介绍：</label>
						<div class="layui-input-block">
							<div id="editor">
								<p>欢迎使用 <b>商品自动销售系统</b></p>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">状态：</label>
						<div class="layui-input-block">
							<input type="radio" name="pdState" value="1" title="上架" checked>
							<input type="radio" name="pdState" value="0" title="下架">
						</div>

					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
		</div>
		<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
		<script type="text/javascript" src="/static/wangEditor/wangEditor.min.js"></script>
		<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var E = window.wangEditor
			var editor = new E('#editor')
			editor.customConfig.menus = [
				'head',  // 标题
				'bold',  // 粗体
				'fontSize',  // 字号
				'italic',  // 斜体
				'underline',  // 下划线
				'strikeThrough',  // 删除线
				'foreColor',  // 文字颜色
				'backColor',  // 背景颜色
				'link',  // 插入链接
				'list',  // 列表
				'justify',  // 对齐方式
				'quote',  // 引用
				'emoticon',  // 表情
				'image',  // 插入图片
				'table',  // 表格
				'video',  // 插入视频
				'undo'  // 撤销
			]
			// 或者 var editor = new E( document.getElementById('editor') )
			editor.create()
			//Demo
			layui.use(['form','upload','jquery'], function() {
				var form = layui.form();
				var $ = layui.jquery;
				form.render();
				//选中判断
				form.on('select(type)', function(data){
					if(data.value == 1){
						$("#gd").show();
						$("#gdNum").show();
					}else{
						$("#gd").hide();
						$("#gdNum").hide();
					}
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					//layer.msg(JSON.stringify(data.field));
					var name = $("input[name='pdName']").val();
					var type = $("select[name='pdType']").find("option:selected").val();
					var gd = $("input[name='pdGd']").val();
					var gdNum = $("input[name='pdGdNum']").val();
					var price = $("input[name='pdPrice']").val();
					var price2 = $("input[name='pdPrice2']").val();
					var pic = $("input[name='pdPic']").val();
					var des = editor.txt.html();
					var pdclass = $("select[name='pdClass']").find("option:selected").val();
					var state = $("input[name='pdState']:checked").val();
					var datas = {};
					if(type == 1){
						datas = {
							pdName:name,
							pdType:type,
							pdGd:gd,
							pdGdNum:gdNum,
							pdPrice:price,
							pdPrice2:price2,
							pdPic:pic,
							pdDes:des,
							pdClass:pdclass,
							pdState:state
						};
					}else{
						datas = {
							pdName:name,
							pdType:type,
							pdPrice:price,
							pdPrice2:price2,
							pdPic:pic,
							pdDes:des,
							pdClass:pdclass,
							pdState:state
						};
					}
					$.ajax({
						url:"/admin/ajax/addProduct",
						type:"post",
						data:datas,
						success:function (res) {
							if(res == 1){
								layer.msg("添加产品成功！",{
									time:2000,
									end:function () {
										//先得到当前iframe层的索引
										var index = parent.layer.getFrameIndex(window.name);
										//再执行关闭
										parent.layer.close(index);
									}
								});
							}
						}

					});

					return false;
				});
				//上传
				layui.upload({
					elem: "#upload",
					ext: 'jpg|png|gif',
					url: '/admin/ajax/upload',
					success: function (res) {
						if(res.data.src != "" || res.code == 1){
							$("#pic").val(res.data.src);
						}
					}
				});
			});
		</script>
	</body>

</html>